<template>
    <el-dialog :title="title"
               v-bind="$attrs"
               v-on="$listeners"
               :close-on-click-modal="false"
               :before-close="handleDialogClose"
    >

        <el-form :model="form">
            <el-form-item label="桌号" :label-width="formLabelWidth">
                <el-input v-model="form.food_table_number" autocomplete="off" style="width: 300px" type="text" placeholder="请输入餐桌编号"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth" >
                <el-select v-model="form.food_table_type" placeholder="请选择餐桌类型" style="width: 300px">
                    <el-option label="大厅" value="大厅"></el-option>
                    <el-option label="包间" value="包间"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="桌位数" :label-width="formLabelWidth"  style="width: 300px">
                <el-input v-model="form.food_table_seat" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item  label="使用状态"
                           v-if="title===titleMap.editTitle"
                           :label-width="formLabelWidth"
                           style="width: 300px">
                <el-radio-group
                        v-model="form.food_table_action"
                       >
                    <el-radio :label="0">空闲</el-radio>
                    <el-radio :label="1">使用中</el-radio>

                </el-radio-group>
            </el-form-item>
            <el-form-item  label="是否结账"
                           v-if="title===titleMap.editTitle"
                           :label-width="formLabelWidth"
                           style="width: 300px">
                <el-radio-group
                        v-model="form.food_table_account"
                >
                    <el-radio :label="1">已结清</el-radio>
                    <el-radio :label="0">未结账</el-radio>

                </el-radio-group>
            </el-form-item>


            <el-form-item label="是否批量添加" :label-width="formLabelWidth" v-if="title===titleMap.addTitle"  hidden>
                <span class="allowChange" :class="{'select':numstate}" @click="allowChange"></span>
                <el-input v-model="addNum" autocomplete="off" clearable style="width: 200px" v-if="numstate" type="number"></el-input>
                <span class="addnumTips">不勾选表示添加1个餐桌。勾选表示添加 输入的添加数量个餐桌。餐桌名从输入的桌名开始递增，批量添加仅适用于餐桌号尾号为数字的编号，例如S01,001。。
</span>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer clear">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

    export default {
        name: "tableDialog",
        props:['form','title'],
        data(){
            return{
                //是否批量，默认不批量
                numstate:false,

                titleMap:{

                    addTitle:'添加餐桌',
                    editTitle:'修改餐桌'
                },
                addNum:1,
                formLabelWidth:'120px'
            }
        },
        methods:{
            //右上角取消图标操作
            handleDialogClose(){
                this.$emit('onclose')
            },


            //规则。导入规则函数。
            testMatch(){

            },
            allowChange(){
              this.numstate=!this.numstate


            },
            closeDialog(){
                this.$emit('onclose')
            },
            addData(){



                this.axios({
                    method:'post',
                    data:{...this.form},
                    url:'/addFoodTable'
                }).then(data=>{
                    if (data.data.code==200){
                        this.$message({
                            type:'success',
                            message:'添加餐桌成功'
                        })
                        this.$emit('onclose',true)
                    }else {
                        this.$message({
                            type:'error',
                            message:'添加餐桌失败，餐桌号已存在请重新填写'
                        })

                    }



            })

            },
            editData(){
                this.axios({
                    method:'post',
                    data:{...this.form},
                    url:'/updateFoodTableById'
                }).then(data=>{
                    if (data.data.code==200){
                        this.$message({
                            type:'success',
                            message:'修改餐桌成功'
                        })
                        this.$emit('onclose',true)
                    }
                    else if(data.data.code==500){
                        this.$message({
                            type:'error',
                            message:'修改餐桌失败，餐桌桌号已存在'
                        })
                    }

                })
            },
            submit(){
                console.log('this.title')
                console.log(this.title)
                console.log(this.titleMap.addTitle)
                if (this.title==this.titleMap.addTitle){
                    //添加
                    let _addData={...this.form}
                    if (this.numstate){


                        for (let i=0;i<this.numstate;i++){
                            _addData.food_table_number=String(parseInt(_addData.food_table_number)+1)

                            this.addData()
                        }

                    }
                    else {
                        console.log(this.form)
                        this.addData()
                    }

                }else{
                    console.log(1111)
                    this.editData()
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.allowChange{
    border: 1px solid rgba(128, 128, 128, 0.31);
    display: inline-block;

    width: 2rem;
    height: 2rem;
    border-radius: 4px;
    margin-bottom: -.8rem;
    margin-right: 2rem;

    &.select{
        background-color: #2C8DFB;
}
}
    .addnumTips{

        float: right;
        display: inline-block;
        width:20rem;
        font-size: 12px;

    }
</style>